// // pages/classify/classify.js
// Page({

//   /**
//    * 页面的初始数据
//    */
//   data: {

//   },

//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad(options) {

//   },

//   /**
//    * 生命周期函数--监听页面初次渲染完成
//    */
//   onReady() {

//   },

//   /**
//    * 生命周期函数--监听页面显示
//    */
//   onShow() {

//   },

//   /**
//    * 生命周期函数--监听页面隐藏
//    */
//   onHide() {

//   },

//   /**
//    * 生命周期函数--监听页面卸载
//    */
//   onUnload() {

//   },

//   /**
//    * 页面相关事件处理函数--监听用户下拉动作
//    */
//   onPullDownRefresh() {

//   },

//   /**
//    * 页面上拉触底事件的处理函数
//    */
//   onReachBottom() {

//   },

//   /**
//    * 用户点击右上角分享
//    */
//   onShareAppMessage() {

//   }
// })



// import * as echarts from '../../ec-canvas/echarts';
// const chartsOption = require('../../utils/chartsOption')

// Page({
//   data: {
//     isSel: 1,
//     barData: {
//       xData: ['10:20', '10:30', '10:50'],
//       yData: [90, 60, 80]
//     },
//     ec: {
//       lazyLoad: true // 懒加载
//     }
//   },

//   selectTap(e) {
//     const isSel = e.currentTarget.dataset.sel
//     const that = this
//     const barData = that.data.barData
//     console.log(barData);
//     if (isSel == 1) {
//       barData.xData = ['10:20', '10:30', '10:50']
//       barData.yData = [90, 60, 80]
//     } else if (isSel == 2) {
//       barData.xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//       barData.yData = [23, 50, 18, 25, 80, 25, 100]
//     } else {
//       barData.xData = ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
//       barData.yData = [90, 60, 80, 70, 40, 50, 100]
//     }
//     that.setData({
//       isSel,
//       barData
//     })
//     that.initChart(that.data.barData)
//   },

//   initChart(barData) {
//     // 绑定组件
//     this.barComponent = this.selectComponent("#mychart-dom-bar");
//     // 初始化柱状图
//     this.barComponent.init((canvas, width, height, dpr) => {
//       // 初始化图表
//       const chart = echarts.init(canvas, null, {
//         width: width,
//         height: height,
//         devicePixelRatio: dpr // 解决模糊显示问题
//       })
//       // 开发中根据从后端获取barData数据,动态更新图表
//       chart.setOption(chartsOption.barOption(barData))
//       return chart
//     })
//   },

//   onShow() {
//     this.initChart(this.data.barData)
//   }
// })





import * as echarts from '../../ec-canvas/echarts';
let chart = null;
let secondchart = null;
 
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
 
  // var option = {
  //   title: {
  //     text: '大棚温度变化',
  //     left: 'center'
  //   },
  //   legend: {
  //     data: ['温度'],
  //     top: 50,
  //     left: 'right',
  //     backgroundColor: 'green',
  //     z: 100
  //   },
  //   grid: {
  //     containLabel: false,
  // },
  //   tooltip: {
  //     show: true,
  //     trigger: 'item'
  //   },
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  //     // show: false
  //   },
  //   yAxis: {
  //     x: 'center',
  //     type: 'value',
  //     splitLine: {
  //       lineStyle: {
  //         type: 'dashed'
  //       }
  //     }
  //     // show: false
  //   },
  //   series: [{
  //     name: '温度',
  //     type: 'line',
  //     smooth: true,
  //     data: [15, 14.5, 14, 13.5, 13, 12.5, 13, 14, 16, 18, 20, 22, 24, 26, 28, 29, 28, 26, 24, 22, 20, 18, 16, 15]
  //   }]
    
  // };
  
 var option = {
    title: {
      text: "温室大棚温度变化",
      left: "50%",
      textAlign: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#ddd",
        },
      },
      backgroundColor: "rgba(255,255,255,1)",
      padding: [5, 10],
      textStyle: {
        color: "#7588E4",
      },
      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
    },
    legend: {
      right: 20,
      orient: "vertical",
      data: ["温度"],
    },
    xAxis: {
      type: "category",
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      boundaryGap: false,
      splitLine: {
        show: true,
        interval: "auto",
        lineStyle: {
          color: ["#D4DFF5"],
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#609ee9",
        },
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14,
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          color: ["#D4DFF5"],
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#609ee9",
        },
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14,
        },
      },
    },
    series: [
      {
        name: "温度",
        type: "line",
        smooth: true,
        showSymbol: false,
        symbol: "circle",
        symbolSize: 6,
        data: [15, 14.5, 14, 13.5, 13, 12.5, 13, 14, 16, 18, 20, 22, 24, 26, 28, 29, 28],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(199, 237, 250,0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(199, 237, 250,0.2)",
                },
              ],
              false
            ),
          },
        },
        itemStyle: {
          normal: {
            color: "#f7b851",
          },
        },
        lineStyle: {
          normal: {
            width: 3,
          },
        },
      }
    ],
  };
  
  chart.setOption(option);
  return chart;
}

function initChart1(canvas, width, height, dpr) {
  const secondchart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(secondchart);
 
  var option1 = {
    title: {
      text: "温室大棚湿度变化",
      left: "50%",
      textAlign: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#ddd",
        },
      },
      backgroundColor: "rgba(255,255,255,1)",
      padding: [5, 10],
      textStyle: {
        color: "#7588E4",
      },
      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
    },
    legend: {
      right: 20,
      orient: "vertical",
      data: ["湿度"],
    },
    xAxis: {
      type: "category",
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      boundaryGap: false,
      splitLine: {
        show: true,
        interval: "auto",
        lineStyle: {
          color: ["#D4DFF5"],
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#609ee9",
        },
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14,
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          color: ["#D4DFF5"],
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#609ee9",
        },
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14,
        },
      },
    },
    series: [
      {
        name: "湿度",
        type: "line",
        smooth: true,
        showSymbol: false,
        symbol: "circle",
        symbolSize: 6,
         data: [70, 72, 74, 76, 78, 80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 60, 62],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(199, 237, 250,0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(199, 237, 250,0.2)",
                },
              ],
              false
            ),
          },
        },
        itemStyle: {
          normal: {
            color: "#f7b851",
          },
        },
        lineStyle: {
          normal: {
            width: 3,
          },
        },
      }
    ],
  };
  
  
  secondchart.setOption(option1);
  return secondchart;
}

function initChart2(canvas, width, height, dpr) {
  const thirdchart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(thirdchart);
 
  var option2 = {
    title: {
      text: '温室大棚二氧化碳浓度变化',
      left: 'center'
    },
    legend: {
      data: ['二氧化碳浓度'],
      top: 30,
      left: 'right',
      backgroundColor: 'green',
      z: 100
    },
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '二氧化碳浓度',
      type: 'line',
      smooth: true,
      data: [400, 410, 420, 430, 440, 450, 460, 470, 480, 490, 500, 510, 520, 530, 540, 550, 560]
    }]
};
  
  thirdchart.setOption(option2);
  return thirdchart;
}

function initChart3(canvas, width, height, dpr) {
  const chart3 = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart3);
 
  var option3 = {
    title: {
      text: '温室大棚光照变化',
      left: 'center'
    },
    legend: {
      data: ['光照强度'],
      top: 30,
      left: 'right',
      backgroundColor: 'green',
      z: 100
    },
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '光照强度',
      type: 'line',
      smooth: true,
      data: [0, 0, 0, 0, 0, 0, 100, 500, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 7000]
    }]
};
  
  chart3.setOption(option3);
  return chart3;
}

// function initChart3(canvas, width, height, dpr) {
//   const chart4 = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr // new
//   });
//   canvas.setChart(chart3);
 
//   var option4 = {
//     title: {
//       text: '温室大棚光照变化',
//       left: 'center'
//     },
//     legend: {
//       data: ['光照强度'],
//       top: 50,
//       left: 'right',
//       backgroundColor: 'green',
//       z: 100
//     },
//     grid: {
//       containLabel: false
//     },
//     tooltip: {
//       show: true,
//       trigger: 'item'
//     },
//     xAxis: {
//       type: 'category',
//       boundaryGap: false,
//       data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
//       // show: false
//     },
//     yAxis: {
//       x: 'center',
//       type: 'value',
//       splitLine: {
//         lineStyle: {
//           type: 'dashed'
//         }
//       }
//       // show: false
//     },
//     series: [{
//       name: '光照强度',
//       type: 'line',
//       smooth: true,
//       data: [18, 36, 65, 30, 78, 40, 33]
//     }]
// };
  
//   chart3.setOption(option4);
//   return chart4;
// }



Page({
  onShareAppMessage: function (res) {
  },
  data: {
    ec: {
      onInit: initChart
    },
    ec1: {
      onInit: initChart1
    },
    ec2: {
      onInit: initChart2
    },
    ec3: {
      onInit: initChart3
    },
    // ec4: {
    //   onInit: initChart4
    // },
    // ec5: {
    //   onInit: initChart5
    // },
    // ec6: {
    //   onInit: initChart6
    // },
    // ec7: {
    //   onInit: initChart7
    // }

    gridItems: [{
      imgUrl: "/images/温度计.png",
      // url: 'http://www.shuzhiqiang.com',
      text: '温度',
      num: '23℃',
      tag: '今日'
    },
    {
      imgUrl: "/images/湿度.png",
      // url: 'http://www.shuzhiqiang.com',
      text: '湿度',
      num: '59%',
      tag: '今日'
    },
    {
      imgUrl: "/images/光照.png",
      // url: 'http://www.shuzhiqiang.com',
      text: '光照强度',
      num: '3104Lux',
      tag: '今日'
    },
    {
      imgUrl: "/images/co2.png",
      // url: 'http://www.shuzhiqiang.com',
      text: 'CO2',
      num: '587ppm',
      tag: '今日'
    },
    {
      imgUrl: "/images/pH值.png",
      // url: 'http://www.shuzhiqiang.com',
      text: 'PH值',
      num: '6.7',
      tag: '今日'
    },
    {
      imgUrl: "/images/土壤湿度.png",
      // url: 'http://www.shuzhiqiang.com',
      text: '土壤湿度',
      num: '3451%',
      tag: '今日'
    },]
  },
 
  onReady() {
  },
  gridTap(e) {
    console.log(e);
  },
  
});

